<<template>
    <div class="box">
        <h1>养老历史账单</h1>
        <el-table :data="tableData" border style="width: 1100px" align="center" >
            <el-table-column prop="id" label="序号" />
            <el-table-column prop="billName" label="账单名称"  />
            <el-table-column prop="billType" label="账单类型"  />
            <el-table-column prop="time" label="结算日期"  />
            <el-table-column prop="price" label="账单金额"  />
            <el-table-column prop="status" label="结算状态"  />
            <el-table-column prop="time1" label="结算时间"  />
            <el-table-column prop="" label="操作"  >
            <el-link type="primary">查看详情</el-link>
            </el-table-column>
        </el-table>
    </div>
</template>

<script setup>
import {ref,reactive} from 'vue'

const tableData=reactive([
    {
        id:1,
        billName:'2022年8月退住养老账单',
        billType:'退住账单',
        time:'2022-08-01',
        price:'1666.2',
        status:'已结算',
        time1:'2022-08-01 12:00:00'
    },
    {
        id:2,
        billName:'2022年8月退住养老账单',
        billType:'月结账单',
        time:'2022-08-01',
        price:'1666.3',
        status:'已结算',
        time1:'2022-08-01 12:00:00'
    }
])
</script>

<style  scoped>
.box {
  width: 900px;
  height: 400px;
  margin: auto;
  border: 1px solid gray;
}
.box h1 {
  width: 100%;
  text-align: center;
  line-height: 70px;
  background: #ccc;
}
</style>